<template>
    <div>
        <canvas id="c1" width="500px" height="500px"></canvas>
        <video src="/static/mov_bbb.mp4" controls></video>
    </div>
</template>
<script>
export default {
    mounted() {
        let video = document.querySelector('video')
        video.play()
        let canvas = document.querySelector('#c1')
        let ctx = canvas.getContext('2d')
        setInterval(() => {
            // console.log(video)
            let cacheCanvas = document.createElement('canvas')
            cacheCanvas.height = canvas.height
            cacheCanvas.width = canvas.width
            let ctx2 = cacheCanvas.getContext('2d')
            ctx2.drawImage(video, 0, 0)
            // ctx.drawImage(cacheCanvas, 0, 0)
            let img = document.createElement('img')
            let imgUrl = cacheCanvas.toDataURL("image/jpeg", 1.0)
            img.setAttribute('src', imgUrl)
            img.onload = function () {
                // alert(img)
                // console.log('img', img)
                ctx.drawImage(img, 0, 0)
            }
        }, 20)
    }
}
</script>
